<template>
  <div class="board-container">
    <!-- 标题区 -->
    <div class="board-title">DN电站设备监控</div>

    <div class="board-content">
      <!-- 设备基础信息 -->
      <el-row :gutter="20" class="content-overview">
        <el-col :span="16">
          <el-row>
            <el-col :span="12">
              <div class="object-count text-gradient">DN汇流箱</div>
              <div class="object-name">设备编码：nlFXV6Frnto1</div>
            </el-col>
            <el-col :span="12">
              <div class="object-name">厂家：--</div>
              <div class="object-name">额定交流功率：--</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <img src="@/assets/images/wechat-QR.png" class="device-image" />
        </el-col>
      </el-row>

      <!-- 核心指标区 -->
      <el-row :gutter="20" class="mt20">
        <el-col :span="12">
          <el-card class="content-status">
            <div class="box-title">发电量信息</div>
            <el-row class="mt10">
              <el-col :span="8">
                <div class="text-gradient">0</div>
                <div class="object-name">日发电量(kWh)</div>
              </el-col>
              <el-col :span="8">
                <div class="text-gradient">0</div>
                <div class="object-name">月发电量(kWh)</div>
              </el-col>
              <el-col :span="8">
                <div class="text-gradient">0</div>
                <div class="object-name">年发电量(kWh)</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="content-status">
            <div class="box-title">收益信息</div>
            <el-row class="mt10">
              <el-col :span="8">
                <div class="text-gradient">0</div>
                <div class="object-name">日收益(元)</div>
              </el-col>
              <el-col :span="8">
                <div class="text-gradient">0</div>
                <div class="object-name">月收益(元)</div>
              </el-col>
              <el-col :span="8">
                <div class="text-gradient">0</div>
                <div class="object-name">年收益(元)</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 实时功率仪表盘 -->
      <el-card class="content-chart mt20">
        <div class="box-title">实时发电功率</div>
        <div ref="gaugeChart" class="chart-container"></div>
      </el-card>

      <!-- 趋势分析区 -->
      <el-card class="content-trend mt20">
        <div class="box-title">发电量趋势分析</div>
        <el-tabs v-model="activeTrend" class="trend-tabs">
          <el-tab-pane label="本年" name="year"></el-tab-pane>
          <el-tab-pane label="本月" name="month"></el-tab-pane>
          <el-tab-pane label="本日" name="day"></el-tab-pane>
        </el-tabs>
        <div ref="lineChart" class="chart-container"></div>
      </el-card>

      <!-- 电参数表格 -->
      <el-card class="content-carbon mt20">
        <div class="box-title">交流电参数</div>
        <el-table :data="acParams" style="width: 100%">
          <el-table-column prop="param" label="参数" width="150" />
          <template v-for="phase in ['A相', 'B相', 'C相']">
            <el-table-column :label="phase" :key="phase">
              <template slot-scope="scope">
                {{ scope.row[phase.toLowerCase()] || '--' }}
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      activeTrend: 'month',
      acParams: [
        { param: '电压(V)', a: '--', b: '--', c: '--' },
        { param: '电流(A)', a: '--', b: '--', c: '--' },
        { param: '总有功功率(kW)', a: '--', b: '--', c: '--' },
        { param: '功率因数', a: '--', b: '--', c: '--' },
        { param: '频率(Hz)', a: '--', b: '--', c: '--' }
      ]
    }
  },
  mounted() {
    this.initGaugeChart()
    this.initLineChart()
  },
  methods: {
    initGaugeChart() {
      const chart = echarts.init(this.$refs.gaugeChart)
      const option = {
        series: [{
          type: 'gauge',
          center: ['50%', '60%'],
          detail: { formatter: '0 kW' },
          data: [{ value: 0 }],
          axisLine: { lineStyle: { color: [[1, '#00d1ff']] } },
          axisTick: { length: 8 },
          splitLine: { length: 12 }
        }]
      }
      chart.setOption(option)
    },
    initLineChart() {
      const chart = echarts.init(this.$refs.lineChart)
      const option = {
        xAxis: {
          type: 'category',
          data: Array.from({length:31}, (_,i) => `${i+1}日`)
        },
        yAxis: { type: 'value', name: 'kWh' },
        series: [{
          type: 'line',
          data: []
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.board-container {
  background-image: url("~@/assets/images/board-bg.png");
  background-size: 100% 100%;
  height: 100vh;
}

.device-image {
  width: 200px;
  height: 150px;
  float: right;
}

.text-gradient {
  background-image: linear-gradient(to top, #2571e9, #00e7ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 28px;
  margin: 10px 0;
}

.chart-container {
  height: 300px;
  margin-top: 20px;
}

::v-deep .el-table {
  background: transparent;
  color: #fff;
}
</style>
